<template>
	<div class="data-text-module">
		<div class="data-text_title">{{ title }}</div>
		<div class="data-text_content">
			<slot></slot>
			<template v-if="list.length == 0">
				<div class="data-list color-red">{{ emptyText }}</div>
			</template>
			<template v-else>
				<div class="data-list" v-for="(item, index) in list" :key="index">
					<div
						class="data-child-list"
						v-for="(items, clildIndex) in item"
						:key="clildIndex"
					>
						<div class="data-child-list_label">{{ items.label }}：</div>
						<div class="data-child-list_value">{{ items.value }}</div>
					</div>
				</div>
			</template>
		</div>
	</div>
</template>

<script>
	export default {
		name: "data-text-module",
		props: {
			title: {
				type: String,
				default: "标题"
			},
			list: {
				type: Array,
				default: () => []
			},
			emptyText: {
				type: String,
				default: "数据为空"
			}
		}
	};
</script>


<style lang="scss" scoped>
	.data-text-module {
		font-size: 12px;
		.data-text_title {
			margin-bottom: 10px;
		}
		.data-text_content {
			border: 0.5px solid $border-main;
			border-radius: 4px;
			padding: 20px;
			.data-list {
				display: flex;
				align-items: center;
				margin-top: 20px;
				&:first-child {
					margin-top: 0;
				}
				.data-child-list {
					display: flex;
					align-items: center;
					width: 150px;
					&:nth-child(even) {
						color: #666;
						.data-child-list_value {
							color: $color-primary;
						}
					}
					&_label {
						color: #666;
					}
					&_value {
						color: #ec808d;
					}
				}
			}
		}
	}
</style>

<style lang="scss" scoped>
	.data-text-module {
		.data-text_content {
			background-color: #fff;
		}
	}
</style>
